<template>
    <div>
        <Modal :mask-closable="false"
            :width="800"
            v-model="fileVisble"
            :title="`${$t('preliminary.TechnicalSpecification')}`"
            class="modal-content-layout"
        >
            <div class="upload-box">
                <span class="upload-box-title">
                    {{ $t('preliminary.Specification') }}
                </span>
                <span class="view-file-list" v-for="(item, index) in detailObj.technicalDocumentList" :key="index">
                    <Tag class="view-item-src" color="blue" type="border" @click.native="handlePreview(item)">
                        {{ item.fileName }}
                    </Tag>
                </span>
                <Upload
                    ref="fileUpload"
                    class="upload-box-upload"
                    :show-upload-list="false"
                    :before-upload="specsHandleBeforeUpload"
                    type="drag"
                    action=""
                >
                    <!-- 点击上传 -->
                    <Button icon="ios-cloud-upload-outline">{{ $t('common.Upload') }}</Button>
                </Upload>
                <div>
                    <div class="file-list" v-for="(item, index) in specsFileList" :key="index">
                        <span class="item-src">{{ item.fileName }}</span>
                        <Icon class="item-icon" type="ios-trash-outline" size="20" style="float:right;"
                              @click="delFileList(index, 2)" v-if="item"></Icon>
                    </div>
                </div>
            </div>
            <Divider/>
            <div class="upload-box">
                <span class="upload-box-title">
                    {{ $t('preliminary.RequestDocument') }}
                </span>
                <span class="view-file-list" v-for="(item, index) in detailObj.requirementsDocumentList" :key="index">
                    <Tag class="view-item-src" color="blue" type="border" @click.native="handlePreview(item)">
                        {{ item.fileName }}
                    </Tag>
                </span>
                <Upload
                    ref="fileUpload"
                    class="upload-box-upload"
                    :show-upload-list="false"
                    :before-upload="demandHandleBeforeUpload"
                    type="drag"
                    action=""
                >
                    <!-- 点击上传 -->
                    <Button icon="ios-cloud-upload-outline">{{ $t('common.Upload') }}</Button>
                </Upload>
                <div>
                    <div class="file-list" v-for="(item, index) in demandFileList" :key="index">
                        <span class="item-src">{{ item.fileName }}</span>
                        <Icon class="item-icon" type="ios-trash-outline" size="20" style="float:right;"
                              @click="delFileList(index, 4)" v-if="item"></Icon>
                    </div>
                </div>
            </div>
            <Divider/>
            <div class="upload-box">
                <span class="upload-box-title">
                    {{ $t('preliminary.CapExAppilicationList') }}
                </span>
                <span class="view-file-list" v-for="(item, index) in detailObj.assetApplicationFormList" :key="index">
                    <Tag class="view-item-src" color="blue" type="border" @click.native="handlePreview(item)">
                        {{ item.fileName }}
                    </Tag>
                </span>
                <Upload
                    ref="fileUpload"
                    class="upload-box-upload"
                    :show-upload-list="false"
                    :before-upload="applyHandleBeforeUpload"
                    type="drag"
                    action=""
                >
                    <!-- 点击上传 -->
                    <Button icon="ios-cloud-upload-outline">{{ $t('common.Upload') }}</Button>
                </Upload>
                <div>
                    <div class="file-list" v-for="(item, index) in applyFileList" :key="index">
                        <span class="item-src">{{ item.fileName }}</span>
                        <Icon class="item-icon" type="ios-trash-outline" size="20" style="float:right;"
                              @click="delFileList(index, 5)" v-if="item"></Icon>
                    </div>
                </div>
            </div>
            <Divider/>
            <div class="upload-box">
                <span class="upload-box-title">
                    {{ $t('common.other') }}
                </span>
                <span class="view-file-list" v-for="(item, index) in detailObj.otherDocumentList" :key="index">
                    <Tag class="view-item-src" color="blue" type="border" @click.native="handlePreview(item)">
                        {{ item.fileName }}
                    </Tag>
                </span>
                <Upload
                    ref="fileUpload"
                    class="upload-box-upload"
                    :show-upload-list="false"
                    :before-upload="otherHandleBeforeUpload"
                    type="drag"
                    action=""
                >
                    <!-- 点击上传 -->
                    <Button icon="ios-cloud-upload-outline">{{ $t('common.Upload') }}</Button>
                </Upload>
                <div>
                    <div class="file-list" v-for="(item, index) in otherFileList" :key="index">
                        <span class="item-src">{{ item.fileName }}</span>
                        <Icon class="item-icon" type="ios-trash-outline" size="20" style="float:right;"
                              @click="delFileList(index, 99)" v-if="item"></Icon>
                    </div>
                </div>
            </div>

            <div slot="footer">
                <Button type="text" @click="handleCancel">{{ $t('common.Cancle') }}</Button>
                <Button type="primary" :loading="loadingVisible" @click="handleOk">{{ $t('maintenance.Confirmed') }}
                </Button>
            </div>
        </Modal>
    </div>

</template>

<script>
export default {
    name: "filePurchaseModal",
    data() {
        return {
            delId: '',
            delelteVisible: false,
            delLoading: false,
            uploadLoading: false,
            loadingVisible: false,
            fileVisble: false,
            formTop: {},
            uploadList: [],
            dmsPurchaseAttachmentList: [],
            specsFileList: [],
            demandFileList: [],
            applyFileList: [],
            otherFileList: [],
            detailObj: {}
        }
    },
    methods: {
        show(record) {
            this.detailObj = {};
            this.uploadList = []
            this.dmsPurchaseAttachmentList = []
            this.specsFileList = []
            this.demandFileList = []
            this.applyFileList = []
            this.otherFileList = []
            this.formTop = {
                ...record
            }
            this.getPurchaseDetailList(record.id);

            this.fileVisble = true
        },
        //文件上传
        specsHandleBeforeUpload(file) {
            let formData = new FormData();
            formData.append("dir", 'device')
            formData.append("file", file)
            let config = {
                headers: {
                    "Content-Type": "multipart/form-data"
                }
            };
            this.axios({
                method: 'post',
                url: '/fileServer/upload',
                data: formData,
                config,
            }).then(res => {
                if (res.code == 200) {
                    this.specsFileList.push({
                        attachmentType: 2,
                        fileName: res.data.fileName,
                        filePath: res.data.filepath,
                        fileUrl: res.data.fileUrl
                    })
                    console.log("specsFileList", this.specsFileList)

                }
            })
            return false;
        },
        //文件上传
        demandHandleBeforeUpload(file) {
            let formData = new FormData();
            formData.append("dir", 'device')
            formData.append("file", file)
            let config = {
                headers: {
                    "Content-Type": "multipart/form-data"
                }
            };
            this.axios({
                method: 'post',
                url: '/fileServer/upload',
                data: formData,
                config,
            }).then(res => {
                if (res.code == 200) {
                    this.demandFileList.push({
                        attachmentType: 4,
                        fileName: res.data.fileName,
                        filePath: res.data.filepath,
                        fileUrl: res.data.fileUrl
                    })
                    console.log("demandFileList", this.demandFileList)

                }
            })
            return false;
        },
        //文件上传
        applyHandleBeforeUpload(file) {
            let formData = new FormData();
            formData.append("dir", 'device')
            formData.append("file", file)
            let config = {
                headers: {
                    "Content-Type": "multipart/form-data"
                }
            };
            this.axios({
                method: 'post',
                url: '/fileServer/upload',
                data: formData,
                config,
            }).then(res => {
                if (res.code == 200) {
                    this.applyFileList.push({
                        attachmentType: 5,
                        fileName: res.data.fileName,
                        filePath: res.data.filepath,
                        fileUrl: res.data.fileUrl
                    })
                    console.log("applyFileList", this.applyFileList)

                }
            })
            return false;
        },
        //文件上传
        otherHandleBeforeUpload(file) {
            let formData = new FormData();
            formData.append("dir", 'device')
            formData.append("file", file)
            let config = {
                headers: {
                    "Content-Type": "multipart/form-data"
                }
            };
            this.axios({
                method: 'post',
                url: '/fileServer/upload',
                data: formData,
                config,
            }).then(res => {
                if (res.code == 200) {
                    this.otherFileList.push({
                        attachmentType: 99,
                        fileName: res.data.fileName,
                        filePath: res.data.filepath,
                        fileUrl: res.data.fileUrl
                    })
                    console.log("otherFileList", this.otherFileList)

                }
            })
            return false;
        },
        //文件预览
        handlePreview(item) {
            if (item.filePath) {
                let path = this.util.filePathToUrl(item.filePath);
                window.open(path);
            }
        },
        delFileList(id, type) {
            if (type == 2) {
                this.specsFileList = this.specsFileList.filter((item, index) => index != id)
            } else if (type == 4) {
                this.demandFileList = this.demandFileList.filter((item, index) => index != id)
            } else if (type == 5) {
                this.applyFileList = this.applyFileList.filter((item, index) => index != id)
            } else {
                this.otherFileList = this.otherFileList.filter((item, index) => index != id)
            }

        },
        handleOk() {
            let {ebeln, orderno, ebelp, banfn, bnfpo} = this.formTop
            let params = {
                ebeln,
                orderno,
                ebelp,
                banfn,
                bnfpo,

            }

            params.dmsPurchaseAttachmentList = [...this.specsFileList, ...this.demandFileList, ...this.applyFileList, ...this.otherFileList]
            params.id = this.formTop.id;

            this.loadingVisible = true
            this.axios({
                method: 'post',
                url: '/dms/dmsPurchase/updateJsFile',
                data: params
            }).then(res => {
                
                if (res.code === 200) {
                    this.fileVisble = false
                    this.loadingVisible = false
                    this.$Message.success(this.$t('preliminary.p5'))
                    this.$emit('refresh')
                } else {
                    this.fileVisble = false
                    this.loadingVisible = false
                    this.$Message.error(({content: res.msg, duration: 6, closable: true}))
                }
            })

        },
        handleCancel() {
            this.fileVisble = false
        },
        getPurchaseDetailList(dmsPurchaseId) {
            this.axios({
                method: 'get',
                url: '/dms/dmsPurchase/detail',
                params: {
                    dmsPurchaseId: dmsPurchaseId
                }
            }).then(res => {
                if (res.code === 200) {
                    this.detailObj = res.data
                } else {
                    this.$Message.warning(({content: res.msg, duration: 6, closable: true}));
                }
            })
        }
    }
}
</script>

<style scoped lang="scss">
.upload-box {

    .upload-box-title {
        display: inline-block;
      font-size: 14px;
      font-weight: 400;
      color: #00142D;
    }

    .upload-box-upload {
        margin-top: 20px;
        width: 120px;
    }
}

.view-file-list {
    height: 100%;
    float: right;
    display: inline-block;
    word-wrap: break-word;
    color: #187bdb;
    cursor: pointer;

    .view-item-src {
        margin-left: 25px;
        line-height: 20px;
        color: #187bdb;
        cursor: pointer;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;

    }

    .view-item-icon {
        width: 20%;
        display: inline-block;
        margin-top: 4px;
    }
}

.file-list {
    /*margin: 20px;*/
    .item-src {
        width: 80%;
        display: inline-block;
        line-height: 26px;
        color: #187bdb;
        cursor: pointer;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .item-icon {
        width: 20%;
        display: inline-block;
        margin-top: 4px;
    }
}

/deep/ .ivu-upload-drag:hover {
    border: none;
}

/deep/ .ivu-upload-drag {
    border: none;
}
</style>
